<template>
  <div class="baseTable" :style="{ width: tableWidth }">
    <el-table
      :id="'baseTable-' + tableOptions.ref"
      class="table"
      v-loading="tableOptions.loading"
      :data="data"
      :stripe="tableOptions.stripe"
      :size="tableOptions.size"
      :height="tableOptions.tableHeight"
      :max-height="tableOptions.maxHeight"
      :ref="tableOptions.ref"
      :border="tableOptions.border"
      :lazy="tableOptions.lazy"
      :tree-props="tableOptions.treeProps"
      :row-key="tableOptions.rowKey"
      :cell-style="tableOptions.cellStyle"
      :default-expand-all="tableOptions.expandAllTree"
      :expand-row-keys="tableOptions.expandRowKeys"
      :show-header="tableOptions.showHeader"
      :key="tableOptions.key"
      :highlight-current-row="tableOptions.highlightCurrentRow"
      :row-class-name="tableOptions.rowClassName"
      :load="load"
      :span-method="spanMethod"
      @selection-change="handleSelectionChange"
      @cell-click="handleCellClick"
      @cell-dblclick="handleCellDblClick"
      @row-click="handleRowClick"
      @row-dblclick="handleRowDblClick"
      @header-click="handleHeaderClick"
    >
      <!-- :show-summary="tableOptions.showSummary" :summary-method="getSummaries" -->
      <div v-if="tableOptions.isExpand" style="overflow: hidden">
        <el-table-column type="expand" width="1">
          <template slot-scope="props">
            <tableTemplate
              :data="props.row.childrenList"
              :options="tableOptions.itemTableOptions"
            ></tableTemplate>
          </template>
        </el-table-column>
      </div>
      <!--选择框-->
      <el-table-column
        v-if="tableOptions.multiSelect"
        type="selection"
        width="40"
        prop="_section"
        align="center"
        :selectable="tableOptions.isDisable"
        :fixed="tableOptions.selectFixed"
        :reserve-selection="tableOptions.reserveSelection"
      />
      <template v-if="!tableOptions.hideIndex">
        <el-table-column
          type="index"
          width="60"
          align="center"
          label="序号"
          v-if="tableOptions.pagination"
          prop="_index"
          :fixed="tableOptions.IndexFixed"
        >
          <template slot-scope="scope">
            {{
              tableOptions.pagination.pageSize *
                (tableOptions.pagination.pageIndex - 1) +
              scope.$index +
              1
            }}
          </template>
        </el-table-column>
        <el-table-column
          type="index"
          width="60"
          align="center"
          label="序号"
          v-if="!tableOptions.pagination"
          prop="_index"
          :fixed="tableOptions.IndexFixed"
        />
      </template>
      <!--数据列-->
      <template v-for="(item, index) in tableOptions.columns">
        <base-children-column
          v-if="item.children && item.children.length > 0"
          :key="index"
          :index="index"
          :col="item"
        />
        <base-table-column v-else :key="index" :index="index" :col="item" />
      </template>

      <!--按钮操作组-->
      <el-table-column
        ref="fixedColumn"
        label="操作"
        prop="operates"
        :align="tableOptions.operates.align || 'center'"
        :width="tableOptions.operates.width"
        :fixed="tableOptions.operates.fixed"
        v-if="
          tableOptions.operates &&
          tableOptions.operates.list &&
          tableOptions.operates.list.filter((_x) => _x.show === true).length > 0
        "
      >
        <template slot-scope="scope">
          <div class="operate-group">
            <template v-for="(btn, key) in tableOptions.operates.list">
              <div
                class="item"
                v-if="btn.show && (!btn.filter || btn.filter(scope.row, key))"
                :key="key"
              >
                <template v-if="btn.tooltip">
                  <el-tooltip
                    :effect="btn.tooltip.effect"
                    :content="btn.tooltip.content"
                    :placement="btn.tooltip.placement"
                    :disabled="btn.disabled || btn.tooltip.disabled"
                    :offset="btn.tooltip.offset"
                    :transition="btn.tooltip.transition"
                    :visible-arrow="btn.tooltip.visibleArrow"
                    :popper-options="btn.tooltip.popperOptions"
                    :open-delay="btn.tooltip.openDelay"
                    :manual="btn.tooltip.manual"
                    :popper-class="btn.tooltip.popperClass"
                    :enterable="btn.tooltip.enterable"
                    :hide-after="btn.tooltip.hideAfter"
                    v-permission="btn.permission"
                  >
                    <el-button
                      v-if="$utils.isNotEmpty(btn.label)"
                      :type="btn.type"
                      :size="btn.size"
                      :icon="btn.icon"
                      :disabled="btn.disabled"
                      :plain="btn.plain"
                      :class="btn.class"
                      @click.native.prevent="
                        btn.method(key, scope.row, scope.$index)
                      "
                    >
                      {{ btn.label }}
                    </el-button>
                    <el-button
                      v-else
                      :type="btn.type"
                      :size="btn.size"
                      :icon="btn.icon"
                      :disabled="btn.disabled"
                      :plain="btn.plain"
                      :class="btn.class"
                      @click.native.prevent="
                        btn.method(key, scope.row, scope.$index)
                      "
                    />
                  </el-tooltip>
                </template>
                <template v-else>
                  <el-button
                    v-if="$utils.isNotEmpty(btn.label)"
                    :type="btn.type"
                    :size="btn.size"
                    :icon="btn.icon"
                    :disabled="btn.disabled"
                    :plain="btn.plain"
                    :class="btn.class"
                    @click.native.prevent="
                      btn.method(key, scope.row, scope.$index)
                    "
                    v-permission="btn.permission"
                  >
                    {{ btn.label }}
                  </el-button>
                  <el-button
                    v-else
                    :type="btn.type"
                    :size="btn.size"
                    :icon="btn.icon"
                    :disabled="btn.disabled"
                    :plain="btn.plain"
                    :class="btn.class"
                    @click.native.prevent="
                      btn.method(key, scope.row, scope.$index)
                    "
                    v-permission="btn.permission"
                  />
                </template>
              </div>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <base-table-footer
      v-if="tableOptions.showSummary"
      :data="tableOptions.footerData"
      :show-summary="tableOptions.showSummary"
      :summary-array="tableOptions.summaryArray"
      :summary-method="tableOptions.getSummaries"
      ref="tableFooter"
    ></base-table-footer>

    <div style="height: 12px" v-if="tableOptions.pagination.total"></div>
    <el-pagination
      class="table_pagination"
      v-if="tableOptions.pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleIndexChange"
      :page-size="tableOptions.pagination.pageSize"
      :page-sizes="tableOptions.pagination.pageArray"
      :current-page="tableOptions.pagination.pageIndex"
      layout="total,sizes, prev, pager, next,jumper"
      :total="tableOptions.pagination.total"
    ></el-pagination>
  </div>
</template>

<script>
import TableSearch from "./TableSearch";
import BaseTableColumn from "./BaseTableColumn";
import BaseChildrenColumn from "./BaseChildrenColumn";
import BaseTableFooter from "./BaseTableFooter";
export default {
  name: "BaseTable",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    options: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    BaseTableColumn,
    BaseChildrenColumn,
    BaseTableFooter,
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index,
        };
        if (ctx.props.column) {
          params.column = ctx.props.column;
        }
        return ctx.props.render(h, params);
      },
    },
    expandHeader: {
      functional: true,
      props: {
        row: Object,
        headerRender: Function,
        index: Number,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index,
        };
        if (ctx.props.column) {
          params.column = ctx.props.column;
        }
        if (ctx.props.headerRender) {
          return ctx.props.headerRender(h, params);
        } else {
          return h("span", ctx.props.column.label);
        }
      },
    },
    popover: {
      functional: true,
      props: {
        content: Function,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, ctx) => {
        return ctx.props.content(h, ctx.props.column);
      },
    },
  },
  data() {
    return {
      multipleSelection: [],
      tableOptions: {},
      tableSearchCache: [],
      defaultOptions: {
        container: "",
        subHeight: 0,
        disabledClickSelect: false,
        hideIndex: false,
        showHeader: true,
        ref: "mutipleTable",
        size: "mini",
        border: true,
        lazy: false,
        treeProps: {
          children: "children",
          hasChildren: "hasChildren",
        },
        expandAllTree: false,
        rowKey: "id",
        loading: false, //是否添加表格loading加载动画
        stripe: false, //是否为斑马纹 table
        highlightCurrentRow: false, //是否要高亮当前行
        //需要展示的列
        //prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽,
        //resizable: 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）
        columns: [],
        multiSelect: false,
        reserveSelection: false, //分页记忆功能
        //操作按钮组
        // label: 文本，
        // type :类型（primary / success / warning / danger / info / text），
        // show：是否显示，
        // icon：按钮图标，
        // plain：是否朴素按钮，
        // disabled：是否禁用，
        // method：回调方法，
        // size: 大小
        operates: {
          list: [],
        },
        pagination: false,
        cellStyle({ row, column, rowIndex, columnIndex }) {},
        getMaxHeight() {
          return undefined;
        },
        footerData: [],//结构和data一样，summary-methodys优先于footerData，
      },
      popoverOptions: {},
      filter: () => {
        return true;
      },
    };
  },
  computed: {
    tableWidth() {
      if (this.tableOptions.width !== undefined) {
        if (typeof this.tableOptions.width === "number") {
          return `${this.tableOptions.width}px`;
        } else {
          return this.tableOptions.width;
        }
      }
      return "100%";
    },
  },
  watch: {
    options: {
      handler() {
        this.initTableOptions(this.options);
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    let _this = this;
    _this.initTableOptions(_this.options);
    window.onresize = () => {
      _this.resizeTable();
    };
  },
  activated() {
    this.resizeTable();
  },
  // updated () {
  //     this.$nextTick(() => {
  //         this.$refs[this.tableOptions.ref].doLayout();
  //     });
  // },
  methods: {
    resizeTable() {
      let _this = this;
      this.$nextTick(() => {
        if (this.tableOptions.showSummary) {
          const { tableFooter } = this.$refs;
          let table = this.$refs[this.tableOptions.ref];
          // 调用init方法传入表格实例初始化footer
          tableFooter && tableFooter.init(table);
        }
        let hasTabs = $("#app").find(".tabs_wrapper").length > 0;
        if (hasTabs) {
          this.resizeTabsTable();
        } else {
          let maxH = _this.tableOptions.getMaxHeight();
          if (maxH) {
            _this.tableOptions = $.extend({}, _this.tableOptions, {
              maxHeight: maxH,
            });
          } else {
            if (_this.$utils.isNotEmpty(_this.tableOptions.container)) {
              let maxHeight = $("#app").find(".app_content").height();
              let cardHeader = $(_this.tableOptions.container).find(
                ".el-card__header"
              );
              if (cardHeader.length > 0) {
                let chHeight = cardHeader.outerHeight();
                if (chHeight < 52) {
                  chHeight = 52;
                }
                maxHeight -= chHeight;
              }
              let buttons = $(_this.tableOptions.container).find(".buttons");
              if (buttons.length > 0) {
                maxHeight -= buttons.outerHeight();
              }
              if (_this.tableOptions.pagination) {
                let pagination = $(".baseTable").find(".table_pagination");
                if (pagination.length > 0) {
                  maxHeight -= pagination.outerHeight() + 35;
                }
                maxHeight -= 12;
              } else {
                maxHeight -= 24;
              }
              if (_this.tableOptions.subHeight) {
                maxHeight -= _this.tableOptions.subHeight;
              }
              if (maxHeight > 0) {
                _this.tableOptions = $.extend({}, _this.tableOptions, {
                  maxHeight: maxHeight,
                });
              }
            }
          }
          setTimeout(() => {
            let container = $("#app");
            if (_this.$utils.isNotEmpty(_this.tableOptions.container)) {
              container = $("#app").find(_this.tableOptions.container);
            }
            let height = $(container)
              .find(".baseTable")
              .find(".table")
              .height();
            let maxHeight = $(container)
              .find(".baseTable")
              .find(".table")
              .css("maxHeight");
            let hasMaxHeight = maxHeight !== "none";
            let fixedLeft = $(container)
              .find(".baseTable .table")
              .find(".el-table__fixed-left");
            if (fixedLeft && fixedLeft.length > 0) {
              if (hasMaxHeight) {
                fixedLeft.css("height", "auto");
                fixedLeft.css("maxHeight", maxHeight);
              } else {
                fixedLeft.height(height);
              }
            }
            let fixedRight = $(container)
              .find(".baseTable .table")
              .find(".el-table__fixed-right");
            if (fixedRight && fixedRight.length > 0) {
              if (hasMaxHeight) {
                fixedRight.css("height", "auto");
                fixedRight.css("maxHeight", maxHeight);
              } else {
                fixedRight.height(height);
              }
            }
          }, 2);
        }
      });
    },
    resizeTabsTable() {
      let _this = this;
      let maxH = _this.tableOptions.getMaxHeight();
      if (maxH) {
        _this.tableOptions = $.extend({}, _this.tableOptions, {
          maxHeight: maxH,
        });
      } else {
        let tabsWrapper = $("#app").find(".tabs_wrapper");
        let activeTabs = $(tabsWrapper)
          .find(".el-tabs__nav")
          .find(".el-tabs__item.is-active");
        let tabPane = $(activeTabs).attr("aria-controls");
        let tabContainer = $(tabsWrapper).find(`#${tabPane}`);
        if (_this.$utils.isNotEmpty(_this.tableOptions.container)) {
          let maxHeight = $(tabContainer).find(".tab_content").height();
          let cardHeader = $(tabContainer)
            .find(_this.tableOptions.container)
            .find(".el-card__header");
          if (cardHeader.length > 0) {
            let chHeight = cardHeader.outerHeight();
            if (chHeight < 52) {
              chHeight = 52;
            }
            maxHeight -= chHeight;
          }
          let buttons = $(tabContainer)
            .find(_this.tableOptions.container)
            .find(".buttons");
          if (buttons.length > 0) {
            maxHeight -= buttons.outerHeight();
          }
          if (_this.tableOptions.pagination) {
            // let pagination = $(tabContainer).find(_this.tableOptions.container).find('.baseTable').find('.table_pagination');
            // if (pagination.length > 0) {
            //     maxHeight -= (pagination.outerHeight() + 35);
            // }
            maxHeight -= 28 + 35;
            maxHeight -= 12;
          } else {
            maxHeight -= 24;
          }
          if (_this.tableOptions.subHeight) {
            maxHeight -= _this.tableOptions.subHeight;
          }
          if (maxHeight > 0) {
            _this.tableOptions = $.extend({}, _this.tableOptions, {
              maxHeight: maxHeight,
            });
          }
        }
        setTimeout(() => {
          let height = $(tabContainer)
            .find(".baseTable")
            .find(".table")
            .height();
          let maxHeight = $(tabContainer)
            .find(".baseTable")
            .find(".table")
            .css("maxHeight");
          let hasMaxHeight = maxHeight !== "none";
          let fixedLeft = $(tabContainer)
            .find(".baseTable .table")
            .find(".el-table__fixed-left");
          if (fixedLeft && fixedLeft.length > 0) {
            if (hasMaxHeight) {
              fixedLeft.css("height", "auto");
              fixedLeft.css("maxHeight", maxHeight);
            } else {
              fixedLeft.height(height);
            }
          }
          let fixedRight = $(tabContainer)
            .find(".baseTable .table")
            .find(".el-table__fixed-right");
          if (fixedRight && fixedRight.length > 0) {
            if (hasMaxHeight) {
              fixedRight.css("height", "auto");
              fixedRight.css("maxHeight", maxHeight);
            } else {
              fixedRight.height(height);
            }
          }
        }, 2);
      }
    },
    initTableOptions(options) {
      this.tableOptions = $.extend({}, this.defaultOptions, options);
      this.tableSearchCache = [];
      if (this.tableOptions.pagination) {
        if (!this.tableOptions.pagination.pageSize) {
          this.tableOptions.pagination.pageSize = window.configs.pageSize;
        }
        if (!this.tableOptions.pagination.pageArray) {
          this.tableOptions.pagination.pageArray = window.configs.pageSizes;
        }
      }
      if (
        this.tableOptions.operates.list &&
        this.tableOptions.operates.list.length > 0
      ) {
        this.tableOptions.operates.list.forEach((item) => {
          if (item.filter === undefined) {
            item.filter = this.filter;
          }
        });
      }
      this.tableOptions.columns.forEach((item) => {
        if (item.search) {
          item.renderHeader = (h, data) => {
            return this.renderColumnHeader(h, data, item);
          };
        }
      });

      this.$nextTick(() => {
        this.resizeTable();
      });
    },
    getColumnDatas(columns) {
      let list = [];
      if (columns && columns.length > 0) {
        columns.forEach((item) => {
          let object = $.extend({}, item);
          list.push(object);
          if (item.children && item.children.length > 0) {
            let childs = this.getColumnDatas(item.children);
            if (childs.length > 0) {
              childs.forEach((child) => {
                list.push(child);
              });
            }
          }
        });
      }
      return list;
    },
    getColumnOpt(property) {
      let columns = this.getColumnDatas(this.tableOptions.columns);
      let filter = columns.filter((item) => item.prop === property);
      return filter && filter.length > 0 ? filter[0] : {};
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("handleSelectionChange", val);
      this.$emit("event", { type: "selectionChange", value: val });
    },
    handleCellClick(row, column, event) {
      let ref = this.$refs[this.tableOptions.ref];
      let columnOpt = this.getColumnOpt(column.property);
      this.$emit("handleCellClick", { ref, row, column, event, columnOpt });
      this.$emit("event", {
        type: "cellClick",
        ref,
        row,
        column,
        event,
        columnOpt,
      });
    },
    handleCellDblClick(row, column, event) {
      let ref = this.$refs[this.tableOptions.ref];
      let columnOpt = this.getColumnOpt(column.property);
      this.$emit("handleCellDblClick", { ref, row, column, event, columnOpt });
      this.$emit("event", {
        type: "cellDblClick",
        ref,
        row,
        column,
        event,
        columnOpt,
      });
    },
    handleRowClick(row, column, event) {
      let ref = this.$refs[this.tableOptions.ref];
      //点击行选中
      if (
        !this.tableOptions.disabledClickSelect &&
        this.tableOptions.multiSelect &&
        column &&
        column.property !== "operates"
      ) {
        ref.toggleRowSelection(row);
      }
      if (column) {
        let columnOpt = this.getColumnOpt(column.property);
        this.$emit("handleRowClick", { ref, row, column, event, columnOpt });
        this.$emit("event", {
          type: "rowClick",
          ref,
          row,
          column,
          event,
          columnOpt,
        });
      }
    },
    handleHeaderClick(column, event) {
      let ref = this.$refs[this.tableOptions.ref];
      this.$emit("handleHeaderClick", { ref, column, event });
      this.$emit("event", { type: "headerClick", ref, column, event });
    },
    handleRowDblClick(row, column, event) {
      let ref = this.$refs[this.tableOptions.ref];
      let columnOpt = this.getColumnOpt(column.property);
      this.$emit("handleRowDblClick", { ref, row, column, event, columnOpt });
      this.$emit("event", {
        type: "rowDblClick",
        ref,
        row,
        column,
        event,
        columnOpt,
      });
    },
    load(tree, treeNode, resolve) {
      this.$emit("load", { tree: tree, treeNode: treeNode, resolve: resolve });
      this.$emit("event", { type: "load", tree, treeNode, resolve });
    },
    //切换每页显示的数量
    handleSizeChange(size) {
      if (this.tableOptions.pagination) {
        this.tableOptions.pagination.pageIndex = 1;
        this.tableOptions.pagination.pageSize = size;
        this.$emit("handleChangePage", { pageIndex: 1, pageSize: size });
      }
    },
    handleIndexChange(current) {
      this.tableOptions.pagination.pageIndex = current;
      this.$emit("handleChangePage", {
        pageIndex: current,
        pageSize: this.tableOptions.pagination.pageSize,
      });
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.tableOptions.spanMethod === undefined) {
        if (row.spanOption) {
          let option = row.spanOption[column.property];
          let hideField = row.spanOption.hideField;
          if (hideField && hideField.length > 0) {
            if (hideField.indexOf(column.property) !== -1) {
              return {
                rowspan: 0,
                colspan: 0,
              };
            }
          }
          if (option) {
            if (!option.rowspan) {
              option.rowspan = 0;
            }
            if (!option.colspan) {
              option.colspan = 0;
            }
            return option;
          }
        }
      } else {
        this.tableOptions.spanMethod({ row, column, rowIndex, columnIndex });
      }
    },
    renderColumnHeader(h, data, column) {
      let $this = this;
      return h(TableSearch, {
        props: {
          options: {
            h,
            data,
            column,
            label: column.label,
            cache: $this.tableSearchCache,
          },
        },
        on: {
          searchOperate(data) {
            let object = $.extend({}, data);
            if (data.type && data.type === "clear") {
              $this.tableSearchCache = $this.tableSearchCache.filter(
                (item) => item.field !== data.field
              );
            } else {
              let filter = $this.tableSearchCache.filter(
                (item) => item.field === data.field
              );
              if (filter.length > 0) {
                $this.tableSearchCache = $this.tableSearchCache.filter(
                  (item) => item.field !== data.field
                );
              }
              delete object.type;
              $this.tableSearchCache.push(object);
            }
            typeof column.search.method === "function" &&
              column.search.method($this.tableSearchCache);
          },
        },
      });
    },
    toggleRowSelection(row, selected) {
      if (this.$refs[this.tableOptions.ref]) {
        this.$refs[this.tableOptions.ref].toggleRowSelection(row, selected);
      }
    },
    clearSelection() {
      if (this.$refs[this.tableOptions.ref]) {
        this.$refs[this.tableOptions.ref].clearSelection();
      }
    },
    getSummaries: function (param) {
      if (
        this.tableOptions.getSummaries &&
        typeof this.tableOptions.getSummaries === "function"
      ) {
        return this.tableOptions.getSummaries(param);
      }
      const { columns, data } = param;
      let sums = [];
      let propertySum = {};
      columns.forEach((column, index) => {
        if (index === 0) {
          if (this.tableOptions.multiSelect) {
            (column.rowSpan = 1), (column.colSpan = 2);
          }
          sums[index] = "合计";
          propertySum[column.property] = sums[index]; //重写合计栏数据
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        let isSummary = false;
        if (
          this.tableOptions.summaryArray &&
          this.tableOptions.summaryArray.length > 0
        ) {
          let arrIdx = this.tableOptions.summaryArray.findIndex((item) => {
            return item === column.property;
          });
          isSummary = arrIdx !== -1;
        } else {
          isSummary = !values.every((value) => isNaN(value));
        }
        if (isSummary) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return this.$utils.accAdd(prev, curr);
            } else {
              return prev;
            }
          }, 0);
          // sums[index] += " 元";
          propertySum[column.property] = sums[index]; //重写合计栏数据
        } else {
          sums[index] = "N/A";
        }
      });
      if (this.tableOptions.multiSelect) {
        sums.splice(1, 1);
        propertySum.spanOption = {
          [columns[0].property]: { rowspan: 1, colspan: 2 },
          [columns[1].property]: { rowspan: 0, colspan: 0 },
        };
      }
      sums = sums.map((item) => {
        item = item === "N/A" ? "" : item;
        return item;
      });
      // console.log("sums", sums, propertySum);
      // return sums;//elment原生合计栏数据结构
      return [propertySum]; //重写合计栏数据结构
    },
  },
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
/*@import "../../assets/styles/mixins";*/
.el-pagination {
  text-align: right;
  padding: 0;
}
.table {
  width: auto;
  max-width: 100%;
  height: 100%;

  /deep/ .custom_title {
    width: 100%;
    position: relative;
    height: 100%;

    .custom {
      width: calc(100% - 20px);
    }

    .search_icon {
      position: absolute;
      top: 50%;
      right: 0;
      font-size: 13px;
      transform: translateY(-50%);
      padding: 10px 4px;
    }
  }

  .el-pagination {
    float: right;
    margin: 20px;
  }

  .el-table__header-wrapper,
  .el-table__fixed-header-wrapper {
    thead {
      tr {
        th {
          color: #333333;
        }
      }
    }
  }

  /deep/ .el-table__body {
    tr {
      &:hover {
        td {
          background-color: #e1e1e1;
        }
      }
    }
  }

  .el-table-column--selection .cell {
    padding: 0;
    text-align: center;
  }

  .el-table__fixed-right {
    bottom: 0 !important;
    right: 6px !important;
    z-index: 1004;
  }

  .operate-group {
    display: block;

    .item {
      display: inline-block;
      margin: 5px;
    }
  }

  .filter-data {
    top: e("calc((100% - 100px) / 3)");
    background-color: rgba(0, 0, 0, 0.7);
  }

  .table-action {
    top: e("calc((100% - 100px) / 2)");
    background-color: rgba(0, 0, 0, 0.7);
  }

  .fix-right {
    position: absolute;
    right: 0;
    height: 100px;
    color: #ffffff;
    width: 30px;
    display: block;
    z-index: 1005;
    writing-mode: vertical-rl;
    text-align: center;
    line-height: 28px;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
    cursor: pointer;
  }
}
</style>
